<template>
	<view class="publicity">
		<view class="bg-img">
			<u-image width="750rpx" height="374rpx" src="@/pagesA/static/bg_img.png"></u-image>
		</view>
		<!-- 搜索框区域 -->
		<u-search @search="search" margin="0rpx 20rpx 0rpx" bg-color="rgba(255, 255, 255, 0.3)" :show-action="false"
			border-color="#fff" shape="square" placeholder="请输入查询内容" search-icon-color="#fff" placeholder-color="#fff"
			v-model="keyword"></u-search>
		<!-- tabs切换 -->
		<!-- <u-tabs :list="tabList" bg-color="transparent" inactive-color="#fff" active-color="#fff" :is-scroll="false"
			:current="current" @change="tabChange"></u-tabs> -->
		<view class="pilicy-list">
			<!-- <pilicy-list v-if="Object.keys(list).length > 0" :showName="true" :list="list" @click="handleToFinishPage">
			</pilicy-list> -->
			<ssp-item v-if="Object.keys(list).length > 0" :list="list" @click="handleToFinishPage" :level='level' @yuying='handelYuyin' @yuyingtime='handleYuyinTim'>
			</ssp-item>
			<view class="empty" v-else>
				<u-empty text="暂无记录" mode="data"></u-empty>
			</view>
		</view>
		<videoMax :isShowVideo='isShowVideo' :videoUrl='videoUrl' @colse='handlecolse'></videoMax>
	</view>
</template>

<script>
	import PilicyList from '@/components/pilicy-list/PilicyList.vue'
	import SspItem from '@/components/pilicy-list/sspitem.vue'
	import videoMax from "@/components/video_max/video_max.vue";
	import {
		apiSetApea,
		apiGetAppealByUserY
	} from '@/api/publicity/publicity.js'
	import { dateFormats } from '@/utils/utils.js'
	import CONFIG from '@/config/config.js'
	export default {
		name: 'Publicity',
		components: {
			PilicyList,
			videoMax,
			SspItem
		},
		data() {
			return {
				keyword: '',
				//tab栏数据
				tabList: [{
						name: '已办事项'
					},
					{
						name: '公示'
					}
				],
				current: 0,
				//列表数据
				list: [],
				
				level: getApp().globalData.level,
				
				
				
			}
		},
		onShow() {
			//判断是否是从已办事项公示跳转过来的
			if (Object.keys(this.$Route.query).length > 0) {
				this.current = this.$Route.query.current;
				//获取已公示事项
				// this.apiGetAppealByUserY(1).catch(err => {
				// 	console.log(err)
				// })
				this.getData();
			} else {
				//获取已办事项
				// this.apiGetAppealByUserY(2).catch(err => {
				// 	console.log(err)
				// })
				this.getData();
			}
		},
		methods: {
			handleYuyinTim(e){
				console.log('倒计时触发:',e.index)
				if(this.level == 1){
					this.list[e.index].flag = false
				}else{
					this.list[e.index].appeal.flag = false
				}
				
			},
			handelYuyin(e){
				console.log(e)
				if(this.level == 1){
					this.list[e.index].flag = !e.flag
				}else{
					this.list[e.index].appeal.flag = !e.flag
				}
			},
			//搜索事件
			search() {
				this.getData();
			},
			//tabs选项卡切换
			tabChange(index) {
				this.current = index;
				this.getData();
			},
			getData() {
				if (this.current === 0) {
					//获取已办事项
					this.apiGetAppealByUserY(2).catch(err => {
						console.log(err)
					})
				} else {
					//获取已公示事项
					this.apiGetAppealByUserY(1).catch(err => {
						console.log(err)
					})
				}
			},
			handleToFinishPage(info) {
				this.$Router.push({
					name: 'finish_item',
					params: {
						current: this.current,
						id: info.appeal_id
					}
				})
			},
			//提交公示
			async apiSetApea() {
				const res = await apiSetApea();
				console.log(res)
			},
			//查询已办事项
			async apiGetAppealByUserY(type) {
				const res = await apiGetAppealByUserY(type, this.keyword);
				let _data = res.data.list
				let imageRegex = /\.(jpg|jpeg|png|gif)$/i;
				let videoRegex = /(mp4|avi|mov)/i;
				_data.map((v,i)=>{
					let arr = []
					let url = ''
					let type = ''
					if(this.level == 1){
						if(v.material_files.length != 0){
							let zongArr = v.material_files.split(',')
							zongArr.map((vv,ii)=>{
								url = CONFIG.baseUrl +  vv
								if(imageRegex.test(vv)){
									type = 'img'
								}
								if(videoRegex.test(vv)){
									type = 'video'
								}
								arr.push({url,type})
							})
						}
						if(v.voice_file != ''){
							v.voice_file = CONFIG.baseUrl +  v.voice_file
						}
						v.material_files = arr
						v.createtime = dateFormats(v.createtime * 1000,'Y-m-d H:i')
						v.flag = false
					}else{
						if(v.appeal.material_files.length != 0){
							let zongArr = v.appeal.material_files.split(',')
							zongArr.map((vv,ii)=>{
								url = CONFIG.baseUrl +  vv
								if(imageRegex.test(vv)){
									type = 'img'
								}
								if(videoRegex.test(vv)){
									type = 'video'
								}
								arr.push({url,type})
							})
						}
						if(v.appeal.voice_file != ''){
							v.appeal.voice_file = CONFIG.baseUrl +  v.appeal.voice_file
						}
						
						v.appeal.material_files = arr
						v.appeal.createtime = dateFormats(v.createtime * 1000,'Y-m-d H:i')
						v.appeal.flag = false
					}
				})
				this.list = res.data.list;
				console.log(res)
			}
		},
		watch: {
			keyword(newValue) {
				if (!newValue) {
					this.getData();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pilicy-list {
		margin-top: 22rpx;
		min-height: calc(100vh - 220rpx);
		// background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.empty {
		margin-top: 50%;
	}

	.publicity {
		padding: 20rpx;
	}

	.bg-img {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		z-index: -1;
	}

	::v-deep.u-search {
		background: rgba(255, 255, 255, 0.3) !important;
	}
</style>
